<template>
  <div>
    <div
      style="
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        margin-bottom: 20px;
      "
    >
      注册身份
    </div>
    <van-radio-group
      v-model="modelType"
      style="display: flex; margin-bottom: 20px"
    >
      <van-radio name="3" class="inlineRedio">咨询师</van-radio>
      <van-radio name="4" class="inlineRedio">家长</van-radio>
    </van-radio-group>
  </div>
  <van-form class="login-form" @submit="onSubmit">
    <van-field
      v-model="loginForm.account"
      class="el-form-item"
      name="account"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="loginForm.password"
      class="el-form-item"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      v-model="loginForm.password"
      class="el-form-item"
      type="password"
      name="password"
      label="确认密码"
      placeholder="确认密码"
      :rules="[{ required: true, message: '请填写确认密码' }]"
    />
    <van-field
      v-if="modelType == '3'"
      v-model="loginForm.password"
      class="el-form-item"
      type="password"
      name="password"
      label="真实姓名"
      placeholder="真实姓名"
      :rules="[{ required: true, message: '请填写真实姓名' }]"
    />
    <van-field
      v-if="modelType == '3'"
      v-model="loginForm.password"
      class="el-form-item"
      type="password"
      name="password"
      label="身份证号"
      placeholder="身份证号"
      :rules="[{ required: true, message: '请填写身份证号' }]"
    />
    <van-field
      v-model="loginForm.password"
      class="el-form-item"
      type="password"
      name="password"
      label="手机号"
      placeholder="手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />

    <van-row class="regist">
      <van-col span="12" style="text-align: left">
        <van-radio name="3" class="inlineRedio" @click="openieyi"
          >《注册协议》</van-radio
        >
      </van-col>
    </van-row>
    <van-button type="default" block native-type="submit" class="subbtn">
      立即注册
    </van-button>
  </van-form>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getCaptcha, loginByUsername } from '../../api/login/login'
import { setToken, setUser } from '../../util/auth'
import { Notify } from 'vant'
import { useLoginAfter } from './utils'

export default defineComponent({
  components: {},
  setup(props, context) {
    const router = useRouter()

    const modelType = ref('')
    const showID = ref(false)
    const loginForm = reactive({
      tenantId: '',
      account: '',
      password: '',
      code: '',
    })

    const { loginRedirect } = useLoginAfter()

    return {
      modelType,
      showID,
      loginForm,
      menuClick(menuName) {
        // 通过自定义事件回传值
        context.emit('menuClick', { menuName })
      },
      openieyi() {
        if (!modelType.value) {
          Notify({ type: 'warning', message: '请先选择注册身份' })
          return
        }
        router.push({
          name: 'Xieyi',
          query: {
            modelType: modelType.value,
          },
        })
      },
      useLoginAfter,
    }
  },
  data() {},

  watch: {
    modelType: function (val) {
      this.showID = ['1', '2'].indexOf(val) > -1
    },
  },
  created() {},
  methods: {
    onSubmit(values) {
      values.tenantId = '000000'
      values.grantType = 'captcha'
      values.type = 'account'
      values.key = this.captchaObj.key
      loginByUsername(values).then((res) => {
        const loginfo = res.data.data
        setToken(loginfo.accessToken)
        const user = {
          account: loginfo.account,
          tenantId: loginfo.tenantId,
          userId: loginfo.userId,
          userName: loginfo.userName,
        }
        setUser(JSON.stringify(user))
        this.useLoginAfter()
      })
    },
  },
})
</script>

<style lang="less" scoped>
.login-form {
}

.login-form .el-form-item {
  margin-bottom: 12px;
  opacity: 0.8;
}

.regist {
  font-size: 14px;
  color: #fff;
  margin-top: 20px;
}

.subbtn {
  opacity: 0.8;
  margin-top: 30px;
}

.inlineRedio {
  font-size: 14px;
  float: left;
  margin-left: 10px;
}

/deep/ .van-radio__label {
  color: #fff;
}
</style>
